<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">任务名称</label>
            <div class="layui-input-block">
                <input type="hidden" name="ID" value="<<< .d.ID>>>">
                <input type="text" name="ContainerName" lay-verify="required" lay-reqtext="任务名称不能为空"
                    placeholder="请输入任务名称" value="<<< .d.ContainerName>>>" class="layui-input">
                <tip>填写任务名称，同时也是docker运行时的容器名称。</tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">镜像名称</label>
            <div class="layui-input-block">
                <input type="text" name="ImageName" lay-verify="required" lay-reqtext="镜像名称不能为空" placeholder="请输入镜像名称"
                    value="<<< .d.ImageName>>>" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">所属镜像仓库名称</label>
            <div class="layui-input-block">
                <input type="text" readonly name="Store" value="<<< .d.Store.Name>>> / <<< .d.Store.Addr>>>"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">端口号映射</label>
            <div class="layui-input-block" id="lastPort" style="width: 600px;">
                <<< if le (.d.Port|len) 0>>>
                    <div class="layui-inline">
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="lPort[]" lay-verify="digital" placeholder="容器端口号"
                                    autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="cPort[]" lay-verify="digital" placeholder="宿主机端口号"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button id="addPort" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                                <i class="layui-icon">&#xe654;</i>
                            </button>
                        </div>
                    </div>
                    <<< else>>>
                        <<< range $index, $elem :=.d.Port>>>
                            <div class="layui-inline">
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 150px;">
                                        <input type="text" name="lPort[]" value="<<< $elem.Local >>>"
                                            lay-verify="digital" placeholder="容器端口号" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                    <div class="layui-form-mid">-</div>
                                    <div class="layui-input-inline" style="width: 150px;">
                                        <input type="text" name="cPort[]" value="<<< $elem.Container >>>"
                                            lay-verify="digital" placeholder="宿主机端口号" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <<< if gt $index 0>>>
                                        <button type="button"
                                            class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i
                                                class="layui-icon">&#xe67e;</i></button>
                                        <<< else>>>
                                            <button id="addPort" type="button"
                                                class="layui-btn layui-btn-warm layui-btn-sm">
                                                <i class="layui-icon">&#xe654;</i>
                                            </button>
                                            <<< end>>>
                                </div>
                            </div>
                            <<< end>>>
                                <<< end>>>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">物理卷映射</label>
            <div class="layui-input-block" id="lastVolume" style="width: 600px;">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" name="lVolume[]" placeholder="容器卷" autocomplete="off"
                                class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" name="cVolume[]" placeholder="宿主机卷" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button id="addVolume" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="layui-form-item">
            <label class="layui-form-label">其他参数</label>
            <div class="layui-input-block">
                <input type="text" name="OtherArg" placeholder="请输其它参数" value="<<< .d.OtherArg>>>" class="layui-input">
                <tip>默认重启参数为错误后重启。</tip>
            </div>
        </div> -->

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="Remark" class="layui-textarea" placeholder="请输入备注信息"><<< .d.Remark>>></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //layui 表单动态添加、删除input框  ---start
        //动态添加input输入框
        var p = 1;
        $("#addPort").click(function () {
            var str = '<div class="layui-inline">' +
                '<div class="layui-inline">' +
                '<div class="layui-input-inline" style="width: 150px;">' +
                '<input type="text" name="lPort[]" lay-verify="number|Ndouble|digital" placeholder="容器端口号" autocomplete="off" class="layui-input">' +
                '</div>' +
                '<div class="layui-form-mid">-</div>' +
                '<div class="layui-input-inline" style="width: 150px;">' +
                '<input type="text" name="cPort[]" lay-verify="number|Ndouble|digital" placeholder="宿主机端口号" autocomplete="off" class="layui-input">' +
                '</div>' +
                '</div>' +
                '<div class="layui-inline">' +
                '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
                '</div>' +
                '</div>';
            $("#lastPort").append(str);
            p++;
        });

        var v = 1;
        $("#addVolume").click(function () {
            var str = '<div class="layui-inline">' +
                '<div class="layui-inline">' +
                '<div class="layui-input-inline" style="width: 150px;">' +
                '<input type="text" name="lVolume[]" placeholder="容器卷" autocomplete="off" class="layui-input">' +
                '</div>' +
                '<div class="layui-form-mid">-</div>' +
                '<div class="layui-input-inline" style="width: 150px;">' +
                '<input type="text" name="cVolume[]" placeholder="宿主机卷" autocomplete="off" class="layui-input">' +
                '</div>' +
                '</div>' +
                '<div class="layui-inline">' +
                '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon">&#xe67e;</i></button>' +
                '</div>' +
                '</div>';
            $("#lastVolume").append(str);
            v++;
        });

        //删除动态添加的input输入框
        $("body").on('click', ".removeclass", function () {
            //元素移除前校验是否被引用
            var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
            var parentEle = $(this).parent().parent();
            parentEle.remove();
        });
        //---------end----------

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //自定义表单验证
        form.verify({
            Ndouble: [
                /^[0-9]\d*$/
                , '只能输入整数哦'
            ],
            digital: [
                /^\d{0,5}$/
                , '请填入0-65535的端口号'
            ]
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $("input[name=hPort]").each(function () {
                console.log($(this).val())
            });
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层

            });
            console.log(data.field)
            $.ajax({
                url: "/api/task/edit",
                data: data.field,
                type: "Post",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.code == 500) {
                        layer.alert(data.msg, { icon: 2 });
                    } else {
                        layer.close(index);
                        layer.close(parentIndex);
                    }
                },
                error: function (data) {
                    layer.alert(data.msg, { icon: 2 });
                }
            });
            return false;
        });

    });
</script>